<template>
    <div class="login">
        <div class="jsHacker">
            <JsHacker></JsHacker>
        </div>

        <!--账号登录-->
        <div class="loginBox">
            <!--【账号】【免密】-->
            <div class="top">
                <div :class="{'default':true,'now':choiceId=='account'}" @click="accountLogin">账号</div>
                <div :class="{'default':true,'now':choiceId=='verifyCode'}" @click="verifyCodeLogin">免密码</div>
            </div>

            <!--登录面板-->
            <div class="loginBody">
                <div v-if="choiceId=='account'">
                    <!--账号登录-->
                    <Account></Account>
                </div>
                <div v-if="choiceId=='verifyCode'">
                    <!--验证码登录-->
                    <VerifyCode></VerifyCode>
                </div>
            </div>

            <!--第三方登录-->
            <div class="bottom">
                <!--        <ThirdPartyLinks></ThirdPartyLinks>-->
            </div>
        </div>
    </div>
</template>

<script>
    import JsHacker from "@/components/login/JsHacker"
    import Account from "@/components/login/Account"
    import VerifyCode from "@/components/login/VerifyCode"

    export default {
        name: "",
        components: {
            JsHacker, Account, VerifyCode
        },
        data() {
            return {
                choiceId: "account"
            }
        },
        methods: {
            //账号密码登录
            accountLogin: function () {
                this.choiceId = "account"
            },
            //验证码登录
            verifyCodeLogin: function () {
                this.choiceId = "verifyCode"
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>
    .login {
        width: 100%;
        min-height: calc(100vh - 70px);
        /*相对自身定位*/
        position: relative;
    }

    /*登录盒子*/
    .loginBox {
        width: 320px;
        /*height: 360px;*/
        /*border: 1px solid black;*/
        background-color: #F0F0F0;
        border-radius: 4px;

        /*相对父盒子定位*/
        position: absolute;
        top: calc(20%);
        right: calc(12%);
    }

    /*登录盒子 【账号】【免密】样式*/
    .loginBox .top {
        width: calc(100% - 4px);
        height: 60px;
        margin: 2px auto;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
    }

    /*账号登录，验证码登录*/
    .default {
        font-size: 18px;
        color: #888;
        width: 50%;
        float: left;
        line-height: 60px;
    }

    /*当前在哪个面板*/
    .now {
        color: #F00;
        font-weight: bolder;
        border-bottom-color: #F00;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
    }
</style>